import React from 'react';
import { Steps as AntdSteps } from 'antd';
import type { StepsProps as AntdStepsProps } from 'antd';
import { createStyles } from 'antd-style';

export interface StepsProps extends AntdStepsProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  steps: css`
    .ant-steps-item-process .ant-steps-item-icon {
      background-color: ${token.colorPrimary};
    }
  `,
}));

const Steps: React.FC<StepsProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const stepsClassName = cx(
    className,
    customClassName,
    styles.steps
  );

  return <AntdSteps className={stepsClassName} {...restProps} />;
};

export { Steps };
export default Steps;

